<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/home.css" />
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container col-lg-12">
        <div class="navigation">
            <img class="nav-logo float-left" src="./img/logo.png" alt="logo">
            <div class="nav-text float-left">标准版</div>
            <div class="nav-drop dropdown float-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">ADMIN <span class="caret"></span></a>
                <ul class=" dropdown-menu  dropdown-menu-right">
                    <span class="dropdown-menu-top"></span>
                    <li><a href="#">个人信息</a></li>
                    <li><a href="#">修改密码</a></li>
                </ul>
            </div>
            <img class="nav-avatar float-right" src="./img/avatar.png" alt="头像">
        </div>
        <script src="./js/global.js"></script>
        <div id="sidebar" class="sidebar">
            <ul>
                <li class="active"><a href="#"> 首页</a></li>
                <li><a href="file-task.html"> 文件传输任务</a></li>
                <li><a href="execute-list.html"> 执行列表</a></li>
                <li><a href="task-config.html"> 文件传输任务配置</a></li>
                <li><a href="ferry-task.html"> 光盘摆渡任务</a></li>
                <li><a href="log-list.html"> 日志管理</a></li>
                <li><a href="user.html"> 个人中心</a></li>
            </ul>
            <ul class="m-hide icon-sidebar">
                <li class="active"><a href="#" data-toggle="tooltipp" data-placement="right" title="首页"> </a></li>
                <li><a href="file-task.html"  data-toggle="tooltipp" data-placement="right" title="文件传输任务"> </a></li>
                <li><a href="execute-list.html" data-toggle="tooltipp" data-placement="right" title="执行列表"> </a></li>
                <li><a href="task-config.html" data-toggle="tooltipp" data-placement="right" title="文件传输任务配置"> </a></li>
                <li><a href="ferry-task.html" data-toggle="tooltipp" data-placement="right" title="光盘摆渡任务"> </a></li>
                <li><a href="log-list.html" data-toggle="tooltipp" data-placement="right" title="日志管理"> </a></li>
                <li><a href="user.html" data-toggle="tooltipp" data-placement="right" title="个人中心"> </a></li>
            </ul>
            <div id="flod-btn" class="flod-btn"></div>
        </div>
        <div id="m-content" class="content">
            <!-- 数据表 -->
            <div class="content-top clearfloat">
                <div class="task-data float-left">
                    <div class="title" >我的任务</div>
                    <div class="data">
                        <table class="table">
                            <tr>
                                <td>正在刻录(1) </td>
                                <td>刻录失败(0) </td>
                            </tr>
                            <tr>
                                <td>刻录成功(100)</td>
                                <td>读取成功(100)</td>
                            </tr>
                            <tr>
                                <td>传输成功(200)</td>
                                <td>传输失败(0) </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="task-data float-left">
                    <div class="title">文件传输任务统计</div>
                    <div class="data">
                        <table class="table">
                            <tr>
                                <td>正在刻录(1) </td>
                                <td>刻录失败(0) </td>
                            </tr>
                            <tr>
                                <td>刻录成功(100)</td>
                                <td>读取成功(100)</td>
                            </tr>
                            <tr>
                                <td>传输成功(200)</td>
                                <td>传输失败(0) </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="task-data float-left">
                    <div class="title">光盘摆渡任务统计</div>
                    <div class="data">
                        <table class="table">
                            <tr>
                                <td>正在刻录(1) </td>
                                <td>刻录失败(0) </td>
                            </tr>
                            <tr>
                                <td>刻录成功(100)</td>
                                <td>读取成功(100)</td>
                            </tr>
                            <tr>
                                <td>传输成功(200)</td>
                                <td>传输失败(0) </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!-- table表格1 -->
            <div class="data-table">
                <div class="title">
                    <ul class="nav nav-tabs ">
                        <li class="active"><a href="#tab1" data-toggle="tab"><i
                                    class="glyphicon glyphicon-folder-open"></i>文件传输任务</a></li>
                        <li><a href="#tab2" data-toggle="tab"><i class="glyphicon glyphicon-folder-close"></i>光盘摆渡任务</a>
                        </li>
                        <a class="float-right" href="#"
                            style="">更多 <img class="more" src="img/more.png"/> </a>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="data-list tab-pane active" id="tab1">
                        <div class="table-cont">
                            <div class="table-bottom">
                                <table class="table text-center text-center"
                                    style="text-overflow: ellipsis;white-space: nowrap">
                                    <thead>
                                        <tr>
                                            <td>发送部门</td>
                                            <td>发送人</td>
                                            <td>接收部门</td>
                                            <td>接收人</td>
                                            <td>审核人</td>
                                            <td>源端</td>
                                            <td>目标端</td>
                                            <td>创建时间</td>
                                            <td>计划执行</td>
                                            <td>最新状态</td>
                                     
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                        
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                   
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                   
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                      
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                        
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                       
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-top">
                                <table class="table text-center">
                                    <thead>
                                        <tr>
                                            <td>状态</td>
                                            <td>任务名称</td>
                                            <td>摆渡类型</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><span class="dot dot-waring-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-waring-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-success-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-success-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-danger-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-danger-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                    <div class="table-cont">
                            <div class="table-bottom">
                                <table class="table text-center text-center"
                                    style="text-overflow: ellipsis;white-space: nowrap">
                                    <thead>
                                        <tr>
                                            <td>发送部门</td>
                                            <td>发送人</td>
                                            <td>接收部门</td>
                                            <td>接收人</td>
                                            <td>审核人</td>
                                            <td>源端</td>
                                            <td>目标端</td>
                                            <td>创建时间</td>
                                            <td>计划执行</td>
                                            <td>最新状态</td>
                                           
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                        
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                       
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                     
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                    
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                     
                                        </tr>
                                        <tr>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>办公室</td>
                                            <td>操作员a</td>
                                            <td>审核员a</td>
                                            <td>200.0.0.10</td>
                                            <td>200.0.0.10</td>
                                            <td>2020-03-16</td>
                                            <td>2020-03-16 19:13:00</td>
                                            <td>待执行</td>
                                     
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-top">
                                <table class="table text-center">
                                    <thead>
                                        <tr>
                                            <td>222状态</td>
                                            <td>任务名称</td>
                                            <td>摆渡类型</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><span class="dot dot-waring-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-waring-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-success-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-success-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-danger-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                        <tr>
                                            <td><span class="dot dot-danger-bg"></span></td>
                                            <td>任务名称...</td>
                                            <td>立即摆渡</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- table表格2 -->
            <div class="data-table data-table-two float-left">
                <div class="title">
                    <ul class="nav nav-tabs">
                        <li><a href="#tab3" data-toggle="tab"><i class="glyphicon glyphicon-folder-open"></i>文件传输任务</a>
                        </li>
                        <li class="active"><a href="#tab4" data-toggle="tab"><i
                                    class="glyphicon glyphicon-folder-close"></i>光盘摆渡任务</a></li>
                        <div class="float-right down-btn">
                            <span>传输状态</span>
                            <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    进行中
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="#">已完成</a></li>
                                </ul>
                            </div>
                        </div>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="data-list tab-pane" id="tab3">
                        <div class="no-data">
                            <img src="./img/icon-empty.png" alt=""/>
                            <div>
                                <p>无条件查询数据</p>
                                <button class="btn" >查询条件</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane active" id="tab4">
                        <table class="table text-center">
                            <thead>
                                <tr>
                                    <td>状态</td>
                                    <td>任务名称</td>
                                    <td>摆渡类型</td>
                                    <td>创建时间</td>
                                    <td>计划执行</td>
                                    <td>最新状态</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="dot dot-waring-bg"></span></td>
                                    <td>任务名称...</td>
                                    <td>立即摆渡</td>
                                    <td>2020-03-16</td>
                                    <td>2020-03-16 19:13:00</td>
                                    <td>待执行</td>
                                </tr>
                                <tr>
                                    <td><span class="dot dot-success-bg"></span></td>
                                    <td>任务名称...</td>
                                    <td>立即摆渡</td>
                                    <td>2020-03-16</td>
                                    <td>2020-03-16 19:13:00</td>
                                    <td>待执行</td>
                                </tr>
                                <tr>
                                    <td><span class="dot dot-danger-bg"></span></td>
                                    <td>任务名称...</td>
                                    <td>立即摆渡</td>
                                    <td>2020-03-16</td>
                                    <td>2020-03-16 19:13:00</td>
                                    <td>待执行</td>
                                </tr>
                                <tr>
                                    <td><span class="dot dot-waring-bg"></span></td>
                                    <td>任务名称...</td>
                                    <td>立即摆渡</td>
                                    <td>2020-03-16</td>
                                    <td>2020-03-16 19:13:00</td>
                                    <td>待执行</td>
                                </tr>
                                <tr>
                                    <td><span class="dot dot-success-bg"></span></td>
                                    <td>任务名称...</td>
                                    <td>立即摆渡</td>
                                    <td>2020-03-16</td>
                                    <td>2020-03-16 19:13:00</td>
                                    <td>待执行</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 折线图 -->
            <div class="data-graph float-right">
                <div class="title">
                    <div class="float-left down-btn graph-title-left">
                        <span>曲线图</span>
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                光盘摆渡任务统计
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a href="#">Action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="float-right graph-title-right">
                        <a href="#">全部 <img class="more" src="img/more.png"/></a>
                    </div>
                </div>
                <div id="main-d" style="width: 100%;height:226px;"></div>
            </div>


            <div class="notification">
                    <div class="notification-body">
                      <ul>
                          <li>
                              <img class="view-icon" src="img/view-icon.png" alt="">
                              <div class="view-content">
                                  <p>cs 10个1g 独享 定时</p>
                                  <span>光盘刻录失败</span>
                              </div>
                              <div class="view-right">
                                  <div class="view">查看</div>
                                  <img class="view-close" src="img/view-close.png" alt="">
                              </div>
                          </li>
                          <li>
                            <img class="view-icon" src="img/view-icon.png" alt="">
                            <div class="view-content">
                                <p>cs 10个1g 独享 定时</p>
                                <span>光盘刻录失败</span>
                            </div>
                            <div class="view-right">
                                <div class="view">查看</div>
                                <img class="view-close" src="img/view-close.png" alt="">
                            </div>
                        </li>
                        <li>
                            <img class="view-icon" src="img/view-icon.png" alt="">
                            <div class="view-content">
                                <p>cs 10个1g 独享 定时</p>
                                <span>光盘刻录失败</span>
                            </div>
                            <div class="view-right">
                                <div class="view">查看</div>
                                <img class="view-close" src="img/view-close.png" alt="">
                            </div>
                        </li>
                      </ul>
                    </div>
              </div>


            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
           
            <script type="text/javascript">

                var dom = document.getElementById("main-d");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#4AA3FF'
                            }
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '3%',
                        top:"5%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            nameTextStyle: {// 名称样式
                                fontSize: 12,
                                color: '#333333',
                                splitLine: { show: false },
                            },
                            splitLine:{
                                show:true    //去掉网格线
                            },
                            data: ['10-20', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{show:false}, //刻度隐藏
                            axisLine: { show: false },//轴线不显示
                            axisTick: { show: false },//刻度横线隐藏
                            splitLine: { show: false },
                        }
                    ],
                    series: [
                        {
                            name: '数据量',
                            type: 'line',
                            // 圆点颜色
                            itemStyle: {
                                color: "#4AA3FF"
                            },
                            stack: '总量',
                            label: {
                                normal: {
                                    
                                }
                            },
                            areaStyle: {
                                        type: 'default',
                                        //渐变色实现
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                                            //三种由深及浅的颜色
                                            [{
                                                offset: 0.2,
                                                color: '#E0F0FF'
                                            }, 
                                            {
                                                offset: 1,
                                                color: '#F2F9FF'
                                            }
                                        ]),
                                    },
                                    lineStyle : {  //线的颜色
                                        color : '#BDDDF4'
                                    },
                            data: [20, 210, 20, 150, 300, 150, 160],
                            smooth: true
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
                window.onresize = myChart.resize;
            </script>
    </div>

</body>

</html>